<template>
  <div>
    <p class="he">
        <span>用户数量：</span>
        <span>钻石总数：</span>
    </p>
    <div class="pl">
        <img src="" alt="" class="usertx">
        <span>用户22111122222</span>
        <span>送：o'o'o</span>
        <span>6999钻石</span>
        <span>2021-01-01 21:00</span>
    </div>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {

data(){
    return{
 currentPage: 1,
    }
},
methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  
   
  },
}
</script>

<style lang="scss" scoped>


    .he{
        font-size: 14px;
        span{
            margin-right: 20px;
        }
    }
    .pl{
        
        display: flex;
        height: 40px;
        line-height: 40px;
        
        :nth-child(2){
            width: 100px;
            // height: 15px;
            font-size: 13px;
       
       
            
        }
        :nth-child(3){
            width: 100px;
            font-size: 12px;
            color: #999999;
        }
        :nth-child(4){
            width: 60px;
             font-size: 12px;
              color: #999999;
        }
        :nth-child(5){
            width: 130px;
            color: #666;
            font-size: 14px;
            
        }
        span{
            margin-right: 20px;
             overflow: hidden;
    white-space: nowrap;

    text-overflow: ellipsis;

    -o-text-overflow: ellipsis;
        }
    }
    .usertx{
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid red;
        margin-right: 10px;
    }
</style>